<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="shortcut icon" href="1.jpg"/>
	</head>
	<body>
		<video width="800" height="600" id="video" controls>
			<source src="A.mp4" type="video/mp4"></source>
		</video>
		<canvas id="c2" width="100" height="100"></canvas>
		<script type="text/javascript">
			
			function makeLine(callback){
				let c1=document.createElement('canvas')
				c1.width=c1.height=500
				console.log(c1);
				var pen=c1.getContext('2d')
				callback(pen)
				pen.stroke()
				document.body.appendChild(c1)
			}
			
			let img=new Image()
			img.src='1.jpg'
			
			let c2=document.getElementById('c2')
			
			img.onload=()=>{
				makeLine(pen=>{
					makeLine(pen=>pen.drawImage(img,0,0,500,500))
					
					
					// 此处的c2，图片大小500x500，画布大小为400x400，显示出的画布大小为600x600，
					// 绘制出的内容为图片0——400x0——400的范围，放在600x600的地方，
					// 换而言之，如果画布大小小于style宽高大小，最后会绘制图片的一部分(类似于将图片放大)
					c2.width=c2.height=400
					c2.style.width=c2.style.height='700px'
					c2.getContext('2d').drawImage(img,0,0,500,500)
					
					// 图片 (裁剪起点(矩形左上角)) (裁剪终点(矩形右下角)) 位置 (裁剪后)大小
					pen.drawImage(img,300,150,350,170,0,0,500,500)
					let imgData=pen.getImageData(0,0,20,100)
					makeLine(pen=>{
						let imgData2=pen.createImageData(50,40)
						for(let i=0;i<8000;i++){
							imgData2.data[i]=imgData.data[i]
						}
						console.log(imgData2);
						// 位置 
						pen.putImageData(imgData2,30,30,0,0,50,40)
					})
				})
			}
			
			
			var video=document.getElementById('video')
			let timer
			video.onplay=()=>{
				makeLine(pen=>{
					window.pen=pen
					pen.rect(0,0,500,500)
					pen.fill()
					// 图片 (裁剪起点(矩形左上角)) (裁剪终点(矩形右下角)) 位置 (裁剪后)大小
					timer=setInterval(()=>{
						pen.drawImage(video,100,50,300,400)
					},20)
					// pen.getImageData(200,100,10,10)查看像素点数据	位置 范围(长宽)   
					// 返回值为每个像素点的rgba,此处查看10*10=100个点，每个点包括4个数字，故共返回400个数字
				})
			}
			video.onpause=()=>{
				clearInterval(timer)
			}
			
			
			
		</script>
	</body>
</html>
